<template>
	<!-- 倒计时提示，top的位置就是头部的高度 -->
	<view class="countdown-tip" :class="{'show': isShow}" :style="{'top' : top +'px'}">
		<!-- 左边，倒计时的部分 -->
		<view class="time-warpper" :style="{'transform': 'scale('+ rpxRatio +')'}">
			<!-- 右半边圆 -->
			<view class="container container1">
				<!-- 里面的半圆 -->
				<view class="half half-circle1" :style="{'transform': 'rotate('+ half1Turn +'deg)'}"></view>
			</view>
			<!-- 左半边圆 -->
			<view class="container container2">
				<!-- 里面的半圆 -->
				<view class="half half-circle2" :style="{'transform': 'rotate('+ half2Turn +'deg)'}"></view>
			</view>
			<!-- 这两个是控制圆角的小圆 -->
			<view class="cir cir1"></view> 
			<view class="cir cir2" :style="{'transform': 'rotate('+ ratio +'turn)'}"></view>
			<!-- 当前秒数 -->
			<text class="time-text">{{time}}</text>
		</view>
		<!-- 右边，提示语 -->
		<view class="tip-right">
			<text class="tip-text">{{tip}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rpxRatio: 1,
			};
		},
		props: {
			// 显示的位置
			top: {
				type: Number,
				default: 0
			},
			// 提示文字
			tip: {
				type: String,
				default: '看视频 赚蜜獾'
			},
			// 是否显示，为true显示
			isShow: {
				type: Boolean,
				default: false
			},
			// 还剩多少时间
			time: {
				type: Number,
				default: 100
			},
			// 共多少时间
			total: {
				type: Number,
				default: 180
			}
		},
		mounted() {
			console.log(this.time, this.total)
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowWidth)
					this.rpxRatio = (res.windowWidth / 750)
				}
			})
		},
		computed: {
			// 计算这段时间已经过去了百分之多少
			ratio() {
				return (this.total - this.time) / this.total;
			},
			// 右边的半圆转的度数
			half1Turn() {
				// 大于50%则不转，停留在180deg这里
				if(this.ratio > 0.5) {
					return 180;
				} else {
					// 小于50%则判断现在占50%的多少，根据这个比例乘180
					return (this.ratio / 0.5) * 180;
				}
			},
			// 左边边的半圆转的度数
			half2Turn() {
				// 小于50%则不转，停留在0这里
				if(this.ratio < 0.5) {
					return 0;
				} else {
					// 大于50%则判断大于50%的部分占50%的多少，根据这个比例乘180
					return ((this.ratio - 0.5) / 0.5) * 180;
				}
			}
		}
	}
</script>

<style>
	
	view {
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.countdown-tip {
		position: fixed;
		left: 32rpx;
		z-index: 5;
		display: none;
		padding-left: 102rpx;
		align-items: center;
		text-align: center;
	}
	
	.show {
		display: flex;
	}
	
	/* 左边，倒计时区域 */
	.time-warpper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 104px;
		height: 104px;
		overflow: visible;
		/* 加上背景色和圆角 */
		border-radius: 50%;
		background: #FFD600;
		transform-origin: left top;
	}
	
	/* 里面半圆所在的容器 */
	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 52px;
		overflow: hidden;
	}
	
	.container1 {
		left: 52px;
	}
	
	.container2 {
		left: 0;
	}
	
	/* 里面的半圆 */
	.half {
	    width: 52px;
	    height: 104px;
		background-color: #1A1A1A;
	}
	
	.half-circle1 {
		border-radius: 0 104px 104px 0;
		transform-origin: 0 52px;
		background-color: #000;
	}
	
	.half-circle2 {
		border-radius: 104px 0 0 104px;
		transform-origin: 52px 52px;
	}
	
	/* 遮盖层 */
	.time-warpper::after {
		content: '';
		position: absolute;
		top: 8px;
		left: 8px;
		right: 8px;
		bottom: 8px;
		border-radius: 50%; 
		background-color: #000;
	}
	
	.cir {
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
		z-index: 2;
	    width: 8px;
	    height: 8px;
	    margin: auto;
		background: #FFD600;
	    border-radius: 50%;
	}
	
	.cir2 {
	    transform-origin: 50% 52px;
	}
	
	.time-text {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 10;
		transform: translate(-50%, -50%);
		font-size: 36px;
		color: #FFD600;
	}
	
	/* 右边 */
	.tip-right {
		padding: 0 24rpx 0 40rpx;
		line-height: 56rpx;
		display: inline-block;
		border: 1px solid rgba(255,214,0,.2);
		background-color: rgba(0,0,0,.2);
		transform: translate(-32rpx, 24rpx);
		border-radius: 28rpx;
	}
	
	.tip-text {
		font-size: 24rpx;
		color: rgba(255,255,255, .6);
	}
</style>
